<template>
	<div class="myfollow">
		<!-- 导航栏 -->
		<Myheader
			title="我的关注"
			:show="true"
			@right="
				$router.push({
					name: 'index',
					query: {
						id: $route.query.id,
					},
				})
			"
		></Myheader>
		<!-- 2.0 关注列表 -->
		<div class="list">
			<div class="item" v-for="(item, index) in follows" :key="item.id">
				<van-image round fit="cover" class="avatar" :src="item.head_img | imgUrl"></van-image>
				<div class="info">
					<h4 class="username">{{ item.nickname }}</h4>
					<p class="date">{{ item.create_date | formatDate }}</p>
				</div>
				<div class="btn" :class="{danger: !item.isFollow}" @click="followBtn(item.id, index)">{{ item.isFollow ? "取消关注" : "添加关注" }}</div>
			</div>
		</div>

		<!-- 空 -->
		<van-empty description="空空如也" v-if="follows.length === 0" />
	</div>
</template>
<script>
import {attentionListAPI, userFollowAPI, unuserFollowAPI} from "@/apis/user";
import Myheader from "@/components/Myheader.vue";

export default {
	data() {
		return {follows: []};
	},
	components: {
		Myheader,
	},
	async created() {
		const res = await attentionListAPI();
		// console.log(res.data.data);
		this.follows = res.data.data.map((item) => {
			return {...item, isFollow: true};
		});
		console.log(this.follows);
	},
	methods: {
		async followBtn(id, index) {
			const {isFollow} = this.follows[index];
			// 如果是已经关注 - 取消关注
			if (isFollow) {
				const res = await unuserFollowAPI(id);
				this.$toast("取消成功");
			} else {
				const res = await userFollowAPI(id);
				this.$toast("关注成功");
			}
			// 改变关注状态
			this.follows[index].isFollow = !this.follows[index].isFollow;
		},
	},
};
</script>

<style lang="less" scoped>
.list {
	.item {
		height: 80px;
		border-bottom: 1px solid #ddd;
		display: flex;
		align-items: center;
		padding: 0 20px;
		.avatar {
			width: 40px;
			height: 40px;
		}
		.info {
			flex: 1;
			margin-left: 20px;
			.username {
				font-size: 16px;
			}
			.date {
				font-size: 13px;
				margin-top: 5px;
				color: #666;
			}
		}
		.btn {
			width: 75px;
			line-height: 30px;
			text-align: center;
			background-color: #e1e1e1;
			border-radius: 50px;
			font-size: 12px;
		}
		.danger {
			background-color: red;
			color: #fff;
		}
	}
}
</style>
